<template>

  <table class="vtable">
    <thead class="header">
    <th v-for="(cell, colIndex) in header" :key="colIndex">
      <span v-text="cell.name"></span>
    </th>
    </thead>
    <tbody class="body">
    <tr v-for="(row, rowIndex) in body" :ref="rowIndex" :class="{'main-row':(rowIndex===0&&model===1)||(model===2&&row.number!==null)}" :key="rowIndex">
      <td class="cell"  v-for="(value, key, colIndex) in row" :key="colIndex" v-if="check(key)" :class="{'down':key==='monthOnMonth'||key==='monthOnMothAccumulate'&&value<=0,'up':key==='monthOnMonth'||key==='monthOnMothAccumulate'&&value>0}">
        <span>{{ value }}</span>
      </td>
    </tr>
    </tbody>
  </table>


</template>

<script>
export default {
  name: 'v-table',
  props: {
    model: {
      type: Number,
      require: true,
      default: 0
    },
    header: {
      type: Array,
      require: true,
      default: () => {
        return [
          {value: "col1", name: "第一列"},
          {value: "col2", name: "第二列"},
          {value: "col3", name: "第三列"},
          {value: "col4", name: "第四列"},
          {value: "col5", name: "第五列"}

        ];
      }
    },
    body: {
      type: Array,
      require: true,
      default: () => {
        return [
          {col1: "1", col2: "测试col2测试col2测试col2测试col2测试col2测试col2", col3: "测试col3", col4: "测试col4", col5: "测试col5"},
          {col1: "2", col2: "测试col2", col3: "测试col3", col4: "测试col4", col5: "测试col5"},
          {col1: "3", col2: "测试col2", col3: "测试col3", col4: "测试col4", col5: "测试col5"},
        ];
      }
    }
  },
  methods: {
    check(key) {
      for (let k in this.header) { // eslint-disable-line no-unused-vars
        if (this.header[k].value == key) {
          return true
        }
      }
      return false;
    }
  }


}
</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
}

.vtable {
  position: relative;
  margin-top: 10px;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid rgba(82, 102, 133, 0.7);
  width: 1050px;
  background-color: rgba(27, 55, 98, 0.5);
  color: aliceblue;
  text-align: left;
  border-radius: 5px;
  margin-left: 20px;
  margin-bottom: 20px;
}

.vtable .header {
  background-color: rgba(27, 56, 100, 0.7) !important;
  backdrop-filter: blur(1px);
  height: 40px;
  color: rgba(159, 203, 228, 1);
  font-size: 16px;
}

.vtable .header th {
  border: 0;
  padding-left: 35px;
}


.vtable .body .cell {
  border-top: 1px solid rgb(82, 102, 133);
  height: 40px;
  padding-left: 35px;
  font-size: 14px;
}

.vtable .body .cell:first-child {
  width: 100px;
}

.vtable .body tr:hover {
  background-color: rgba(7, 80, 148, 0.7);
}

.main-row {
  background-color: rgba(7,80,148,0.8);
}

.main-row td:first-child {
  background: linear-gradient(-75deg, transparent 30%,rgb(18, 116, 211) 30%,rgb(20, 186, 226)) top right;
}



.down {
  color: rgb(16,221,255);
}

.up {
  color: rgb(244,175,18);
}


</style>